import React from 'react'
import { Button, success, Input, Modal, Link, TitleBar, Table } from '../../../ui-components'
import { connect } from 'react-redux'
import style from './style.templateManage'
import util from '../../../util'
import moment from 'moment'

moment.locale('zh-cn')

export default
@connect(({onboardingTemplates}) => ({ onboardingTemplates }))
class TemplateManage extends React.Component {

  state = {
    // 新建模板
    addOnboardingTemplate: false,
    // 新建模板名称
    newOnboardingTemplateName: '',
    // 删除模板
    deleteOnboardingTemplate: false,
    // 当前添加的模板
    curOnboardingTemplate: null,
		isFetching: false
  }

  componentWillReceiveProps(props) {
		if (props.onboardingTemplates.fetchId !== this.props.onboardingTemplates.fetchId) {
			this.setState({
				isFetching: false
			})
		}
  }

  // 删除模板
  deleteOnboardingTemplate() {
    this.props.deleteOnboardingTemplate(this.state.curOnboardingTemplate, () => {
      success('删除模板成功!')
      this.props.fetchOnboardingTemplates()
    })
    util.dialog.call(this, 'deleteOnboardingTemplate')
  }

  // 添加模板
  addOnboardingTemplate() {
    const { newOnboardingTemplateName } = this.state
    if (util.isNull(newOnboardingTemplateName)) return

    this.props.addOnboardingTemplate({ 
      displayName: newOnboardingTemplateName 
    }, () => {
      success('添加模板成功!')
      this.props.fetchOnboardingTemplates()
    })

    util.dialog.call(this, 'addOnboardingTemplate')
  }

  // 改变新建模板名称
  handleChangeNewOnboardingTemplateName(e) {
    this.setState({
      newOnboardingTemplateName: e.target.value
    })
  }

  // 请求删除模板
  requestDeleteOnboardingTemplate(item) {
    this.setState({
      curOnboardingTemplate: item
    })
    util.dialog.call(this, 'deleteOnboardingTemplate')
  }

  handleFileChange() {}
  handleClickUpload() {}

  componentDidMount() {
		this.setState({
			isFetching: true
		})
    this.props.fetchOnboardingTemplates()
  }

  render() {
    const config = {
      model: {
        displayName: '模板名称',
        lastModifiedTime: '更新时间',
        others: ''
      },
      config: {
        status: '.3',
        lastModifiedTime: '.3',
        others: '.2'
      },
      map: {
        lastModifiedTime: v => moment(v).format('YYYY.MM.DD'),
          displayName: (v, item) => <Link label={v} to={`#/hr/onboarding/onboarding-template-edit/${item.onboardingTemplateId}`}/>,
        others: (_, item) => {
          return (
            <span data-role="table-hover">
              <Link onClick={() => this.requestDeleteOnboardingTemplate(item)} label="删除" color="red"/>
            </span>
          )
        }
      }
    }
    const { list } = this.props.onboardingTemplates
    return (
      <div>
        <TitleBar
          label="入职模板"
          actions={[{
            label: "新建模板",
            handler: () => util.dialog.call(this, 'addOnboardingTemplate') 
          }]}
        />
        <Table
          { ...config }
					loading={this.state.isFetching}
          className={style.table}
          data={list}
        />
        <Modal
          active={this.state.addOnboardingTemplate}
          onRequestClose={() => util.dialog.call(this, 'addOnboardingTemplate')}
          actions={['cancel', ::this.addOnboardingTemplate ]}
          title="新建入职模板"
        >
          <div>
            <Input 
              autoFocus
              label="模板名称"
							onChange={::this.handleChangeNewOnboardingTemplateName}/>
          </div>
        </Modal>
        <Modal
          active={this.state.deleteOnboardingTemplate}
          onRequestClose={() => util.dialog.call(this, 'deleteOnboardingTemplate')}
          actions={['cancel', ::this.deleteOnboardingTemplate ]}
          title="删除入职模板"
        >
          <div>
					  <p>确定删除<b>`{ this.state.curOnboardingTemplate && this.state.curOnboardingTemplate.displayName }`</b>模板吗?</p>
          </div>
        </Modal>
      </div>
    )
  }
}
